<!--  -->
<template>
  <base-modal :title="title" :show.sync="visible" width="700px">
    <div class="dialog-main">
      <el-input
        type="textarea"
        :rows="5"
        maxlength="500"
        :placeholder="$t('task.setting.taskSetting.placeholder15')"
        v-model="content"
      >
      </el-input>
      <div>
        <span v-if="count <= 480" style="color: #04BE02;">{{ count }}</span>
        <span v-else style="color: #FF0000;">{{ count }}</span>
        / 500
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="confirm">{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import * as SettingApi from "@src/api/SettingApi.ts";

export default {
  data() {
    return {
      visible: false,
      title: "",
      content: "",
      id: "",
    };
  },
  computed: {
    count() {
      return (this.content && this.content.length) || 0;
    },
  },
  methods: {
    openDialog(mode, id = "") {
      if (mode === "create") {
        this.title = this.$t('event.setting.eventRemarkDialog.title1');
        this.content = "";
      } else {
        this.title = this.$t('event.setting.eventRemarkDialog.title2');
        this.id = id;
        this.getRemarkData(id);
      }

      this.visible = true;
    },

    async getRemarkData(id) {
      try {
        const params = { id };
        const result = await SettingApi.getRemarkData(params);
        if (result.status === 0) {
          this.content = result.data.content;
        } else {
          this.$message({
            showClose: true,
            duration: 1500,
            message: result.message,
            type: "error",
          });
        }
      } catch (error) {
        console.error("get rule error", error);
      }
    },

    confirm() {
      if (this.count === 0) {
        return this.$message({
          showClose: true,
          duration: 3000,
          message: this.$t('task.setting.taskSetting.tip24'),
          type: "error",
        });
      }

      if (this.title === this.$t('event.setting.eventRemarkDialog.title1')) {
        this.create();
      } else {
        this.update();
      }
    },
    async create() {
      try {
        const params = {
          module: "event",
          content: this.content,
        };
        const result = await SettingApi.createRemark(params);
        if (result.succ) {
          this.$message({
            showClose: true,
            duration: 1500,
            message: this.$t('common.base.saveSuccess'),
            type: "success",
          });

          this.visible = false;
          this.$parent.getEventRemarkList();
        } else {
          this.$message({
            showClose: true,
            duration: 1500,
            message: result.message,
            type: "error",
          });
        }
      } catch (error) {
        console.error("create remark error", error);
      }
    },
    async update() {
      try {
        const params = {
          module: "event",
          content: this.content,
          id: this.id,
        };
        const result = await SettingApi.updateRemark(params);
        if (result.succ) {
          this.$message({
            showClose: true,
            duration: 1500,
            message: this.$t('common.base.tip.edit2Success'),
            type: "success",
          });

          this.visible = false;
          this.$parent.getEventRemarkList();
        } else {
          this.$message({
            showClose: true,
            duration: 1500,
            message: result.message,
            type: "error",
          });
        }
      } catch (error) {
        console.error("update remark error", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-main {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  div {
    margin-top: 5px;
  }
}
</style>
